<template>
<view>
	<u-swiper :autoplay="true" :interval="2000" v-for="(color, index) in bg" :key="index" :style="{ backgroundColor: color }"/>
		<view>
		
		选择楼栋<select class="dropdown" v-model="selectedBuilding" @change="menthos()">
				<option value="">选择楼栋</option>
		      <option v-for="(building, index) in buildingOptions" :value="building" :key="index">{{ building }}</option>
		    </select>
		   选择楼层 <select class="dropdown" v-model="selectedFloor" @change="selectedByFloor()">
		      <option value="">选择楼层</option>
		      <option v-for="item in value1" :key="item.roomId" :value="item.roomFloor" >{{ item.roomFloor}}</option>
				
			</select>
	</view>
	
	<u-list >
		<uni-card :is-shadow="true" v-for="item in value" :key="item.roomId" @click="gotoDetail(item)">
		<u-list-item   >
				   <view class="card-content">
				   <view class="card-avatar" :style="{backgroundColor:thumb}"></view>
				   
				     <view class="card-title">{{ item.roomNo }}</view>
				     <view class="card-details">{{ getRoomType(item.roomType) }}</view>
				     
				     <view class="card-details">床位数: {{ item.roomCapacity }}</view>
				   </view>
	</u-list-item></uni-card>
	</u-list>
	
</view>
</template>

<script>
	
	export default {
		
		data() {
			return {visible: true,
				bg:['#55aaff'],
				buildingOptions: ['楼栋A', '楼栋B'],
			      selectedFloor: [],
				  selectedBuilding:[],
				indicatorStyle: `height: 50px;`,
				 value1:[],//获取所有的房间信息
				thumb:'#dfdfdf',
				building:['教师1栋','教师2栋'],
				value:[],//获取一个楼层的房间信息
				floor:[]
					}
		
		
				},
	mounted() {
		this.menthos();
			   },
	methods: {
		
		menthos(){
			uni.request({
			
				url:'http://localhost:8088/system/room/list',
				method:"GET",
				success: (res) => {
					console.log(res.data);
					this.value1=res.data.rows;
					
				}
			})
		},
		//根据楼层获取房间号
		selectedByFloor(){
			const roomFloor=this.selectedFloor;
			uni.request({
			        url: `http://localhost:8088/system/room/roomFloor/${roomFloor}`,
			        method: 'GET',
			        success: (res) => {
			          console.log('获取房间成功',res.data);
			          // 处理返回的房间数据
			          // ...
					  this.value=res.data.data;
			        },
			        fail: (err) => {
			          console.error('获取房间失败', err);
			        }
			      });
		},
		getRoomType(type){
			
			 if (type == 0) {
			        return '标间';
			      } else if (type == 1) {
			        return '双人间';
			      } else if(type==2) {
			        return '特殊房间';
			      }
		},
		// 在发送跳转请求的页面或组件中
		gotoDetail(item){
		   uni.navigateTo({
		      url: '/pages/room-list/room-detail/room-detail',
		      success: function(){
		        //传入房间数据
		        uni.setStorageSync('roomData', item) 
		      }
		    })
		},
		
		},
		
	onload() {
		
				this.menthos();
			
		}}
</script>

<style>
.card-content{
	display: flex;
}
.card-avatar {
  width: 60px;
  height: 60px;
  
  margin-right: 10px;
}.card-title {
  font-size: 18px;
  margin: 18rpx;
}
.card-details{
	margin: 20rpx;
}

.item {
		line-height: 100rpx;
		text-align: center;
	}
	.dropdown{
		margin-left: 50rpx;
	}
</style>